<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style>
			h2,
			p {
				margin: 0;
			}

			.box {
				margin: 30px auto;
				width: 300px;
			}

			#user,
			#message {
				box-sizing: border-box;
				width: 300px;
				border: 1px solid #000;
				padding: 10px;
				height: 100px;
				resize: none;
				display: block;
			}

			#user {
				padding: 0 10px;
				height: 30px;
				margin-bottom: 10px;
			}

			#btn {
				display: block;
				margin: 10px auto;
				width: 60%;
				height: 40px;
			}

			#list {
				border-top: 1px solid #000;
				padding: 10px 0 0;
				margin: 0;
				list-style: none;
			}

			#list li {
				position: relative;
				font: 14px/30px "宋体";
				border-bottom: 1px solid #000;
				padding: 0 15px;
				overflow: hidden;
				height: auto;

			}

			.clos {
				position: absolute;
				right: 5px;
				top: 10px;
			}

			.clos2 {
				position: absolute;
				right: 5px;
				top: 30px;
			}

			.replay {
				position: absolute;
				right: 5px;
				top: 35px;
			}

			.mask {
				width: 100vw;
				height: 100vh;
				background: black;
				opacity: .3;
				position: absolute;
				left: 0;
				top: 0;
				display: none;
			}

			.comfirm {
				width: 200px;
				height: 120px;
				background: white;
				text-align: center;
				position: absolute;
				left: 50%;
				top: 30%;
				border-radius: 5px;
				transform: translate(-50%, -50%);
				overflow: hidden;
				display: none;

			}

			.comfirm button {
				/* position: absolute; */
				/* right: 10px; */
				float: right;
				margin-top: 20px;
				margin-right: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<input type="text" id="user" value="张三" />
			<textarea id="message">法外狂徒张三就是我!</textarea>
			<button id="btn">提交留言</button>
			<ul id="list"></ul>
		</div>
		
		<script>
			var boxEle = document.getElementsByClassName("box");
			var textEle = document.getElementById("user");
			var mseeEle = document.getElementById("message");
			var btnEle = document.getElementById("btn");
			var listEle = document.getElementById("list");
			btnEle.onclick = function() {
				var user1 = textEle.value;
				var msee1 = mseeEle.value;
				var li1 = document.createElement("li");
				li1.innerHTML =
					`<h2 class="user">${user1}说:</h2><p>${msee1}</p><a href="javascript:;" class="clos">删除</a><a href="javascript:;" class="clos2">回复</a>`;
				listEle.appendChild(li1);
				//搜索整个li
				var liEle = document.getElementsByTagName("li");
				//删除功能
				var delEle = document.querySelectorAll(".clos");
				delEle.forEach(function(item) {
					item.onclick = function() {
						this.parentElement.remove();
					}
				})
				
				//增加回复
				var backEle = document.querySelectorAll(".clos2");
				backEle.forEach(function(item1, index) {
					item1.onclick = function() {
						var divEle = document.createElement("div");
						divEle.innerHTML =
							`<input type="text" id="myback" value="123" /><button id="btn2">回复</button>`
						liEle[index].appendChild(divEle);
						
						//提交回复
						var btn2Ele = document.getElementById("btn2");
						btn2Ele.onclick = function() {
							var backvalue = document.getElementById("myback");
							// console.log(backvalue);
							var value2 = backvalue.value;
							// console.log(btn2Ele);
							// console.log(value2);
							var spanEle = document.createElement("span");
							spanEle.innerHTML = `管理员回复:${value2}`;
							// listEle.appendChild(spanEle);
							liEle[index].appendChild(spanEle);
							//删除回复框
							this.parentNode.remove();
						}
					}

				})


			}
		</script>
	</body>
</html>
